<template>
  <div class="login-panel">
    <h1>One Art 唯一艺术</h1>
    <el-tabs type="border-card" stretch v-model="currentType">
      <el-tab-pane name="account">
        <template #label>
          <span><i class="el-icon-user-solid"></i>账号登录</span>
        </template>
        <login-account ref="accountRef"></login-account>
      </el-tab-pane>
      <el-tab-pane name="phone">
        <template #label>
          <span><i class="el-icon-user-solid"></i>手机登录</span>
        </template>
				<login-phone></login-phone>
      </el-tab-pane>
    </el-tabs>
    <div class="operation">
      <span>
        <el-checkbox v-model="isSavePassword" label="记住密码" size="large" />
      </span>
      <span>忘记密码</span>
    </div>
		<div class="login-btn">
			<el-button type="primary" size="default" @click="handleLoginClick">立即登录</el-button>
		</div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import LoginAccount from "./login-account.vue";
import LoginPhone from "./login-phone.vue";

export default defineComponent({
  components: {
    LoginAccount,
		LoginPhone
  },
  setup() {
		const isSavePassword = ref(true)

    const currentType = ref('account')

		const accountRef = ref<InstanceType<typeof LoginAccount>>()
		const handleLoginClick = () => {
      if (currentType.value === 'account') {
        accountRef.value?.loginAction(isSavePassword.value)
      } else {
        console.log('phone login')
      }
		}

    return {
			isSavePassword,
      currentType,
			accountRef,
			handleLoginClick
		};
  },
});
</script>

<style scoped lang='less'>
.login-panel {
  width: 320px;
  h1 {
    text-align: center;
  }
  .operation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		span:last-child {
			color: #909399;
			cursor: pointer;
		}
  }
	.login-btn {
		.el-button {
			width: 100%;
			height: 40px;
			line-height: 40px;
		}
	}
}
</style>